<!DOCTYPE html>
	<html>
	<head>
		<title>{$site_seo_title} {$site_name}</title>
		<meta name="keywords" content="{$site_seo_keywords}" />
		<meta name="description" content="{$site_seo_description}">
		<tc_include file="Public:head" />
		<link href="__TMPL__Public/css/slippry/slippry.css" rel="stylesheet">
		<style>
			.caption-wraper{position: absolute;left:50%;bottom:2em;}
			.caption-wraper .caption{
			position: relative;left:-50%;
			background-color: rgba(0, 0, 0, 0.54);
			padding: 0.4em 1em;
			color:#fff;
			-webkit-border-radius: 1.2em;
			-moz-border-radius: 1.2em;
			-ms-border-radius: 1.2em;
			-o-border-radius: 1.2em;
			border-radius: 1.2em;
			}
			@media (max-width: 767px){
				.sy-box{margin: 12px -20px 0 -20px;}
				.caption-wraper{left:0;bottom: 0.4em;}
				.caption-wraper .caption{
				left: 0;
				padding: 0.2em 0.4em;
				font-size: 0.92em;
				-webkit-border-radius: 0;
				-moz-border-radius: 0;
				-ms-border-radius: 0;
				-o-border-radius: 0;
				border-radius: 0;}
			}
		</style>
		<style type="text/css">
		  body,div,ul,li,a,img{margin: 0;padding: 0;}
		  ul,li{list-style: none;}
		  a{text-decoration: none;}
		  #wrapper{position: relative;margin: 90px auto;width: 1170px;height: 487px;}
		  #banner{position:relative;width: 1170px;height: 487px;overflow: hidden;}
		  .imgList{position:relative;width:4680px;height:487px;z-index: 10;overflow: hidden;}
		  .imgList li{float:left;display: inline;} 
		  #prev,
		  #next{position: absolute;top:203px;z-index: 20;cursor: pointer;opacity: 0.2;filter:alpha(opacity=20);}
		  #prev{left: 10px;}
		  #next{right: 10px;}
		  #prev:hover,
		  #next:hover{opacity: 0.5;filter:alpha(opacity=50);}
		  .bg{position: absolute;bottom: 0;width: 1170px;height: 40px;z-index:20;opacity: 0.4;filter:alpha(opacity=40);background: black;}
		  .infoList{position: absolute;left: 10px;bottom: 10px;z-index: 30;}
		  .infoList li{display: none;}
		  .infoList .infoOn{display: inline;color: white;}
		  .indexList{position: absolute;right: 10px;bottom:5px;z-index: 30;}
		  .indexList li{float: left;margin-right: 5px;padding: 0px 0px;border: 0px solid black;background: grey;cursor: pointer;height:8px;width:8px;border-radius:50%;}
		  .indexList .indexOn{background: red;font-weight: bold;color: white;}
		</style>
		
		<style> 
		#row_1{
		background:#fff;
		position:relative;
	   
		}
		@keyframes myrow_1
		{
		    0%   {left:0px; top:20px;opacity: 0;}		
	    	
			50%{left:0px; top:0px;opacity: 1;}
		}

		@-webkit-keyframes myrow_1 /* Safari and Chrome */
		{
		   0%   {left:0px; top:20px;opacity: 0;}
		   25% {left:0px; top:0px;opacity: 1;}
		   
		}
		
		#row_2{
		background:#fff;
		position:relative;
		
		}
		
		
		#row_3{
		background:#fff;
		position:relative;
		
		}
		
		
	</style>
	</head>
<body class="body-white">
<tc_include file="Public:nav" />

<php>
$home_slides=sp_getslide("include_index");

$home_slides=empty($home_slides)?$default_home_slides:$home_slides;
</php>
<ul id="homeslider" class="unstyled">
	<foreach name="home_slides" item="vo">
	<li>
		<div class="caption-wraper">
			<div class="caption" style="display:none">{$vo.slide_name}</div>
		</div>
		<a href="{$vo.slide_url}"><img src="{:sp_get_asset_upload_path($vo['slide_pic'])}" alt=""></a>
	</li>
	</foreach>
</ul>
<!-- 关于固定的宽度的轮播 小熊科技可以用     <php>
	$home_slides=sp_getslide("include_index");

	$home_slides=empty($home_slides)?$default_home_slides:$home_slides;

	</php>
	
	<div id="wrapper">
		<div id="banner">
		  <ul class="imgList" style="height:600px;">
		  <foreach name="home_slides" item="vo">
		  <li style="height:400px;"><a href="{$vo.slide_url}"><img src="{:sp_get_asset_upload_path($vo['slide_pic'])}" width="1170px" height="487px" alt="puss in boots1"></a></li>
		  </foreach>
		 
		  </ul>
		  <img src="prev.png" width="40px" height="80px" id="prev">
		  <img src="next.png" width="40px" height="80px" id="next">
		  <div class="bg"></div> 
		  <ul class="infoList">
		    <foreach name="home_slides" item="vo">
			  <li class="infoOn">{$vo.slide_name}</li>
			</foreach>
		  </ul>
		  <ul class="indexList">
		  <foreach name="home_slides" item="vo">
			<li class="indexOn"></li>
		  </foreach>
		  </ul>
		</div>
   </div> -->

	<div class="container" style="">
		<div class="row" style="margin-top:158px;margin-bottom:158px;" >
			<div id="row_1"  class="span4" style="opacity:0;text-align:center;">
				<p><img src="__TMPL__Public/images/kaiyuan.jpg" height="100px;" width="100px;"></p>
				 <h2 class="font-large nospace">开源硬件</h2>
				 
			</div>
			<div id="row_2" class="span4" style="opacity:0;text-align:center;">
				 <p><img src="__TMPL__Public/images/xfl.jpg" height="100px;" width="100px;"></p>
				 <h2 class="font-large nospace">消费类电子产品</h2>
				 
			</div>
			<div id="row_3" class="span4" style="opacity:0;text-align:center;">
					<p><img src="__TMPL__Public/images/xnxs.png" height="100px;" width="100px;"></p>
				 <h2 class="font-large nospace">AR/VR</h2>
				  
			</div>
			
		</div>
	</div>
<div style="width:100%;background-color:#f5f5f5;">
	<div class="container" style="height:500px;">
		<div id="container_img_2" style="position:relative;height:500px;width:400px;background-color:#128723"> </div>
		
	</div>
</div>
<div style="width:100%;">
	<div class="container" style="height:500px;">
		<div id="container_img_3" style="float:right;position:relative;height:500px;width:400px;background-color:#128723"> </div>
		
	</div>
</div>	
<div style="width:100%;background-color:#f5f5f5;">
	<div class="container" >
		
		<div style="margin-top:60px;">
			<h1 class="text-center">最新项目</h1>
		</div>
		<php>
			$lastnews=sp_sql_posts("cid:$portal_index_lastnews;field:post_title,post_excerpt,tid,smeta;order:listorder asc;limit:4;"); 
		</php>
		<hr>
		<div class="row" style="margin-top:30px;margin-bottom:30px;">
			<foreach name="lastnews" item="vo">
			<php>$smeta=json_decode($vo['smeta'],true);</php>
			<div class="span3">
				<div class="tc-gridbox">
					<div class="header">
						<div class="item-image" style="height:200px;">
							<a href="{:leuu('article/index',array('id'=>$vo['tid'],'cid'=>$vo['term_id']))}">
								<if condition="empty($smeta['thumb'])"> 
									<img src="__TMPL__Public/images/default_tupian1.png" class="img-responsive" alt="{$vo.post_title}"/>
								<else /> 
									<img src="{:sp_get_asset_upload_path($smeta['thumb'])}" class="img-responsive img-thumbnail" alt="{$vo.post_title}" style="width:100%" />
								</if>
							</a>
						</div>
						<h3><a href="{:leuu('article/index',array('id'=>$vo['tid'],'cid'=>$vo['term_id']))}">{$vo.post_title}</a></h3>
						<hr>
					</div>
					<div class="body">
						<p><a href="{:leuu('article/index',array('id'=>$vo['tid'],'cid'=>$vo['term_id']))}">{:msubstr($vo['post_excerpt'],0,32)}</a></p>
					</div>
				</div>
			</div>
			</foreach>
		</div>
	</div>
</div>

<div class="container" >
		<tc_include file="Public:footer"/>
</div>

<tc_include file="Public:scripts"/>
<script type="text/javascript">
  var curIndex = 0, 
      imgLen = $(".imgList li").length; 
   
  var autoChange = setInterval(function(){ 
    if(curIndex < imgLen-1){ 
      curIndex ++; 
    }else{ 
      curIndex = 0;
    }
   
    changeTo(curIndex); 
  },2500);
   
  $("#prev").hover(function(){ 
   
    clearInterval(autoChange);
  },function(){ 
  
    autoChangeAgain();
  });
 
  $("#prev").click(function(){ 
	
  
    curIndex = (curIndex > 0) ? (--curIndex) : (imgLen - 1);
    changeTo(curIndex);
  });

  $("#next").hover(function(){ 

    clearInterval(autoChange);
  },function(){ 

    autoChangeAgain();
  });
 
  $("#next").click(function(){ 
    curIndex = (curIndex < imgLen - 1) ? (++curIndex) : 0;
    changeTo(curIndex);
  });

  $(".indexList").find("li").each(function(item){ 
    $(this).hover(function(){ 
      clearInterval(autoChange);
      changeTo(item);
      curIndex = item;
    },function(){ 
      autoChangeAgain();
    });
  });

  function autoChangeAgain(){ 
      autoChange = setInterval(function(){ 
      if(curIndex < imgLen-1){ 
        curIndex ++;
      }else{ 
        curIndex = 0;
      }
      changeTo(curIndex); 
    },2500);
    }
  function changeTo(num){ 
    var goLeft = num * 1170;
    $(".imgList").animate({left: "-" + goLeft + "px"},500);
    $(".infoList").find("li").removeClass("infoOn").eq(num).addClass("infoOn");
    $(".indexList").find("li").removeClass("indexOn").eq(num).addClass("indexOn");
  }
  </script>
<script src="__TMPL__Public/js/slippry.min.js"></script>
<script>
$(function() {
    var t1=$("#row_1").offset().top;
	var h=$(window).height();
	var img_h_2=$("#container_img_2").offset().top;
	var img_h_3=$("#container_img_3").offset().top;
	if(h>600){
		  
		 	 $("#row_1").css("animation","myrow_1 2s");
        	 $("#row_1").css("-webkit-animation","myrow_1 2s");
			 //$("#row_1").css("margin-top",0);
			 $("#row_1").css("opacity",1);
			$("#row_2").css("animation","myrow_1 2s");
			$("#row_2").css("-webkit-animation","myrow_1 2s");
			$("#row_2").css("opacity",1);
			$("#row_3").css("animation","myrow_1 2s");
			$("#row_3").css("-webkit-animation","myrow_1 2s");
			$("#row_3").css("opacity",1);
		}
	
	 
	$(window).scroll(function(){
		var top=$(window).scrollTop();	 
		if((top+h)>t1){
		  
		 	$("#row_1").css("animation","myrow_1 2s");
            $("#row_1").css("-webkit-animation","myrow_1 2s"); 
			$("#row_1").css("opacity",1);
			$("#row_2").css("animation","myrow_1 2s");
			$("#row_2").css("-webkit-animation","myrow_1 2s");
			$("#row_2").css("opacity",1);
			$("#row_3").css("animation","myrow_1 2s");
			$("#row_3").css("-webkit-animation","myrow_1 2s");
			$("#row_3").css("opacity",1);
		}
		
		if((h+top-60)>img_h_2)
		{
		    $("#container_img_2").css("animation","myrow_1 2s");
            $("#container_img_2").css("-webkit-animation","myrow_1 2s"); 
		}
		
		if((h+top-60)>img_h_3)
		{
		    $("#container_img_3").css("animation","myrow_1 2s");
            $("#container_img_3").css("-webkit-animation","myrow_1 2s"); 
		}
		
	});


	var demo1 = $("#homeslider").slippry({
		transition: 'fade',
		useCSS: true,
		captions: false,
		speed: 1000,
		pause: 3000,
		auto: true,
		preload: 'visible'
	});
});
</script>

{:hook('footer_end')}
</body>
</html>
